<template>
  <Page>
    <p-header title="Security"/>
    <StackLayout class="container">
       <GridLayout class="line" columns="*, auto, auto" @tap="gotoLoginSet">
        <label text="Login password" col="0" class="title" verticalAlignment="center"/>
        <label text="Change" col="1" class="desc" verticalAlignment="center"/>
        <Image col="2" src="~/images/arrow_right.png" class="indicator"/>
      </GridLayout>
      <GridLayout class="line" columns="*, auto, auto" @tap="gotoFundSet">
        <label text="Payment password" col="0" class="title" verticalAlignment="center"/>
        <label :text="payPassActionText" col="1" class="desc" verticalAlignment="center"/>
        <Image col="2" src="~/images/arrow_right.png" class="indicator"/>
      </GridLayout>
    </StackLayout>
  </Page>
</template>
<script>
import Header from '~/components/common/Header'
import ChangePaymentPass from '~/components/common/ChangePaymentPass'
import {dataBus} from '~/business/DataBus'
import loaderGen, {loadingOption} from '~/utils/loading'

require( "nativescript-localstorage" )

export default {
  components: {
    'p-header': Header,
  },
  data() {
    return {
      hasOldPass: false,
    }
  },
  computed: {
    payPassActionText() {
      return this.hasOldPass ? 'Change' : 'Set'
    }
  },
  methods: {
    gotoFundSet() {
      this.jumpToPasswordSet(this.hasOldPass)
    },
    jumpToPasswordSet(hasOldPass) {
      this.$navigateTo(ChangePaymentPass)
    },
    gotoLoginSet() {
      this.$navigateTo(ResetPass, {
        props: {
          title: 'Login password',
          hint1: 'Old password',
          hint2: 'New password',
          onConfirm: (first, second, done) => {
            dataBus.changeLoginPassword(first, second, {
              onSuccess: () => {
                done()
                alert({
                  title: 'Success',
                  message: 'Set login password successfully',
                  okButtonText: 'OK'
                })
              },
              onError: (code, msg) => {
                done()
                alert(msg)
              }
            })
          }
        }
      })
    }
  },
  mounted() {
    const self = this
    dataBus.isExchangePassExist({
        onSuccess:(ret) => {
          if (ret == 'false') {
            self.hasOldPass = false
          } else {
            self.hasOldPass = true
          }
        }
      })
  }
}
</script>
<style scoped>
.container {
  background: #15273E;
}
.line {
  height: 50;
  padding-left: 12;
  padding-right: 12;
  border-bottom-color: #274867;
  border-bottom-width: 1;
  background: #203956;
}
.title {
  color: white;
  font-size: 16;
}
.desc {
  color: #6292BE;
  font-size: 16;
}
.indicator {
  width: 18;
  height: 18;
  margin-left: 10;
}
</style>
